<template>
    <div class="paging-box">
        <el-button type="primary"  title="首页" @click="toFirst" :disabled="btnDisabledObj.firstBtn" size="small">
            <el-icon><DArrowLeft /></el-icon>
        </el-button>
        <el-button type="primary" title="上一页" @click="toLast" :disabled="btnDisabledObj.lastBtn" size="small">
            <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <div class="page-box">
            <el-input :value="firstPage" style="width: 30px" size="small" 
                @keyup.enter="toSpecify(pageNum)" v-model="pageNum"
                :disabled="btnDisabledObj.firstInput"
            />
            <!-- <el-input style="width: 30px" size="small" @keyup.enter="toSpecify" v-model="pageNum"/> -->
            / <span class="count-page">{{ countPage }}</span>
        </div>
        <el-button type="primary" title="下一页" @click="toNext" :disabled="btnDisabledObj.nextBtn" size="small">
            <el-icon><ArrowRight /></el-icon>
        </el-button>
        <el-button type="primary" title="末页" @click="toEnd" :disabled="btnDisabledObj.endBtn" size="small">
            <el-icon><DArrowRight /></el-icon>
        </el-button>
        <div class="page-info-box">
            <div class="count-page"> 
                每页<el-input :value="pageSize" style="width: 40px" size="small" v-model="pSize" 
                        @keyup.enter="changePsize(pSize)"
                        :disabled="btnDisabledObj.pageSizeInput"
                    /> 条
            </div>
            <div class="count-page">共 {{dataLength}} 条</div>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
let pageNum = ref(0)
let pSize = ref(0)

defineProps({
    firstPage:Number,
    dataLength:Number,
    countPage:Number,
    pageSize:Number,
    btnDisabledObj:Object
})



/**
 * 自定义事件
 * 'toNext' 下一页
 * 'toLast' 上一页
 * 'toEnd' 末页
 * 'toFirst' 首页
 * 'toSpecify' 指定页
 * 'changePsize' 改变每页行数
 */
let emit = defineEmits(['toNext','toLast','toEnd','toFirst','toSpecify','changePsize']) //定义自定义事件
let toNext = () => emit('toNext')     //通知父组件触发自定义事件
let toLast = () => emit('toLast')    
let toFirst = () => emit('toFirst')  
let toEnd = () => emit('toEnd')  
let toSpecify = (pageNum)=> {
    // console.log(typeof pageNum);    
    emit('toSpecify',Number(pageNum)) //通知父组件触发自定义事件，参数1事件名、参数2及往后可以传递多个参数值(注意input传入的值为字符串，如需要数字则需要转换)
}
let changePsize = (pSize) => {
    // console.log(typeof pSize);    
    emit('changePsize',Number(pSize))
}


</script>

<style lang="less" scoped>
.paging-box{
    width: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .page-box{
        .count-page{
            font-size: .75rem;
        }
    }
    .page-info-box{
        width: 40%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .count-page{
            width: 50%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: .75rem;
        }
    }
    // .el-input 文字居中，需要deep深层选择器对.el-input__inner（内部结构）进行设置
    :deep(.el-input__inner){
        text-align: center;
    }
}
</style>